<template>
  <router-view></router-view>
  <van-tabbar v-model="active">
    <van-tabbar-item 
    v-for="item in router.options.routes[0].children"
    :key="item.path"
    :icon="item.meta.icon" 
    :url="`#/${item.path}`">{{item.meta.name}}</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { onMounted, ref ,watch} from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const active = ref(0)


watch(
      () => route.path,
      (newPath) => {
        // console.log(newPath);
        active.value =  router.options.routes[0].children.findIndex(item=>'/'+item.path==newPath)
      },
      { immediate: true }
    );

</script>

<style lang="less" scoped></style>
